<template>
	<view>

		<bx-page headerLeft="支付方式" title="支付管理">

			<template #content>

				<o-row gutter="6">
					<o-col :key="item.unique" v-for="(item,index) in list" span="12" @click="goTo('','back')">

						<view class="card">
							<view class="left">
								<image class="image-icon" v-if="item.pay_type == '支付宝'"
									src="/static/images/setup/pay/static/alipay.png" />
								<image class="image-icon" v-if="item.pay_type == '会员卡'"
									src="/static/images/setup/pay/static/hycard.png" />
								<image class="image-icon" v-if="item.pay_type == '现金'"
									src="/static/images/setup/pay/static/cash.png" />
								<image class="image-icon" v-if="item.pay_type == '微信'"
									src="/static/images/setup/pay/static/wechat.png" />
								<image class="image-icon" v-if="item.pay_type == '积分'"
									src="/static/images/setup/pay/static/jf.png" />
								<image class="image-icon" v-if="item.pay_type == '数字人民币'"
									src="/static/images/setup/pay/static/szrmb.png" />

								<image class="image-icon" v-if="item.pay_type == '银联支付'"
									src="/static/images/setup/pay/static/yl.png" />
								<image class="image-icon" v-if="item.pay_type == '和包'"
									src="/static/images/setup/pay/static/hb2.png" />

								<view class="image-right">
									<view class="top-font">{{item.pay_type}}</view>
									<view class="bottom-font">状态：{{item.pay_status}}</view>
								</view>
							</view>

							<view class="right">


								<u-radio-group @change="changeData(index)" size='20' :value="list[index].pay_status">
									<u-radio name="启用" style="margin-right: 2rem;" shape="circle" label="启用"></u-radio>
									<u-radio name="禁用" style="margin-right: 2rem;" shape="circle" label="禁用"></u-radio>
								</u-radio-group>
							</view>


						</view>

					</o-col>

				</o-row>

			</template>

		</bx-page>



	</view>
</template>

<script>
	export default {

		data() {
			return {
				isAdd: false,
				list: []
			}
		},
		methods: {
			changeList() {
				let obj = this.list[0];


				if (obj.pay_status == "启用") {
					obj.pay_status = "禁用";
				} else {
					obj.pay_status = "启用";
				};
				this.list.splice(0, 1, obj);
			},
			seeList() {
				console.log(this.list, "list22--list22");

			},
			changeData(index) {
				if (this.list[index].incoming_parts_state === '已进件' && this.list[index].pay_type === '微信' && this.list[
						index].pay_status == "禁用") {
					uni.showModal({
						title: '提示',
						content: '需完成微信认证',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								this.list[index].pay_status = "启用";
								this.emitData(index, this.list[index].pay_status);
							}
						}
					})
					return
				}
				if (this.list[index].pay_status == "启用") {
					this.list[index].pay_status = "禁用";
				} else {
					this.list[index].pay_status = "启用";
				};

				this.emitData(index, this.list[index].pay_status);


			},
			emitData(ii, data) {
				console.log(ii, "ii");
				console.log(data, "data");
				let _this = this;
				uni.showModal({
					title: '提示',
					content: `确认要${data}`,
					success: (res) => {
						if (res.confirm) {
							const url = '/retail/operate/srvretail_pay_set_update'
							const req = [{
								"serviceName": "srvretail_pay_set_update",
								"data": [{
									"pay_status": data
								}],
								"srvApp": "retail",
								"condition": [{
									"colName": "id",
									"ruleType": "eq",
									"value": `${this.list[ii].id}`
								}]
							}]

							this.$http.post(url, req).then(res => {
								if (res?.data?.state === 'SUCCESS') {
									uni.showToast({
										title: `${data}成功`,
										duration: 2000
									});
								} else {
									uni.showToast({
										title: `${res.resultMessage}`,
										duration: 2000
									});
									if (this.list[ii].pay_status == "启用") {
										this.list[ii].pay_status = "禁用";
									} else {
										this.list[ii].pay_status = "启用";
									};
									this.list = [...this.list];
								}
							}).catch(() => {
								if (this.list[ii].pay_status == "启用") {
									this.list[ii].pay_status = "禁用";
								} else {
									this.list[ii].pay_status = "启用";
								};
								this.list = [...this.list];

								uni.showToast({
									title: `${data}失败`,
									duration: 2000,
									icon: 'error'
								});

							})
						} else if (res.cancel) {
							console.log(this.list, "shenm shi this.list");
							if (this.list[ii].pay_status == "启用") {
								this.list[ii].pay_status = "禁用";
							} else {
								this.list[ii].pay_status = "启用";
							};
							let obj = this.list[ii];
							this.list.splice(ii, 1, obj);
						}
					}
				});

			},
			changeNo(index, ii) {
				this.emitData(index, "禁用");
			},
			changeEnd(index, ii) {
				this.emitData(index, "启用")
			},
			getList(cond, relationCond) {

				const url = `/retail/select/srvretail_pay_set_select`;

				const req = {
					"serviceName": "srvretail_pay_set_select",
					"colNames": ["*"],
					// "page": {
					// 	"pageNo": 1,
					// 	"rownumber": 10
					// },
				}


				this.$http.post(url, req).then(res => {
					if (res?.data?.state === 'SUCCESS') {
						console.log(res.data.data, "res.data.data", "res--res--")
						res?.data?.data.forEach((item) => {
							let timeUnique = `${Math.random()*1000}${new Date().getTime()}`;
							item.unique = timeUnique;
						})

						this.list = res.data.data;
					}

					uni.hideLoading()
				}).catch(_ => {
					uni.hideLoading()
				})
			},

			handleTrumpet() {

			},
			gotoAdd() {
				this.isAdd = true
			},
			goTo() {},

			addClassifySuccess() {

				this.isAdd = false;
			},
			gotoAdd() {
				this.isAdd = true
			},
			closeAdd() {
				this.isAdd = false;
			},
			toPages(target) {
				if (target) {
					uni.navigateTo({
						url: target
					})
				}
			}
		},
		onLoad() {

			uni.showLoading({
				title: '加载中'
			});
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.image-icon {
		width: 13rem;
		height: 13rem;
	}

	.card {
		border: 1px solid rgba(229, 229, 229, 1);
		border-radius: 10px;
		margin-bottom: 15px;

		display: flex;

		.left {
			padding: 2rem 3rem;
			display: flex;
			flex: 5;
			border-right: 1px solid rgba(229, 229, 229, 1);

			.image-right {
				position: relative;

				left: 3rem;
				top: 1rem;


				.top-font {

					font-size: 3.5rem;
					font-weight: 700;
					margin-bottom: 1rem;


				}

				.bottom-font {
					font-size: 3.4rem;
					font-weight: 500;
					letter-spacing: 0px;
					// line-height: 0px;
					color: rgba(56, 192, 158, 1);
				}
			}

		}


		.right {
			padding: 20px 30px;
			display: flex;
			flex: 2;
		}


	}
</style>
